<template>
  <div class='review-dialog'>
    <el-dialog
      title="评价"
      :visible.sync="isShow"
      width="40%"
      center
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="top">

        <el-form-item label="评论" prop="remark">
          <el-input type="textarea" :rows="4" :maxlength='maxlength' placeholder="请输入评价内容" v-model="ruleForm.remark"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <reward ref="reward"></reward>
  </div>
</template>

<script>
// 打赏
import reward from '~/pages/user/myOrder/components/reward'
export default {
  components: {
    reward
  },
  data () {
    return {
      isShow: false,
      ruleForm: {
        grades: null,
        remark: ''
      },
      maxlength: 500,
      rules: {
        remark: [
          { required: true,message: '请输入评论', trigger: 'change' }
        ]
      },
      order: null,
      isReward: false,
    }
  },
  props: ['type'],
  methods: {
    show (data) {
      console.log(data)
      this.order = data
      this.isShow = true
      this.ruleForm.grades = data.grades.id
      let average = (Number(data.grades.attitude) + Number(data.grades.quelity) + Number(data.grades.take_time)) / 3
      if (average >= 4.5) {
        this.isReward = true
      } else {
        this.isReward = false
      }
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPost()
          this.isShow = false
        } else {
          return false
        }
      })
    },
    submitPost () {
      let params = {
        remark: this.ruleForm.remark,
      }

      this.$axios.post(`api/grades/${this.ruleForm.grades}/append/remark`, params).then(res => {
        if (res.data.code == 200) {
          let message = '感谢您的评论，祝您生活愉快!'
          let cancelButtonText = '取消',
              confirmButtonText = '确定'
          if (this.isReward) {
            message = '如果您觉得代理人还不错打赏一下吧！'
            cancelButtonText = '打赏一下'
            confirmButtonText = '暂不打赏'
          }
          this.$confirm(message, '提示', {
            distinguishCancelAndClose: true,
            center: true,
            confirmButtonText: confirmButtonText,
            cancelButtonText: cancelButtonText
          })
          .then(() => {
            this.$emit('refresh')
            this.handleClose()
          })
          .catch(action => {
            if (action === 'cancel') {
              if (this.isReward) {
                this.$refs['reward'].show(this.order)
              } else {
                this.$emit('refresh')
                this.handleClose()
              }
            } else {
              this.$emit('refresh')
              this.handleClose()
            }
          })
        } else{
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center: true,
            callback: action => {
            }
          })
        }
      }).catch(err => {

      })
    },
    handleClose () {
      if (this.type == 1) {
        this.$emit('refresh')
      }
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .review-dialog {
    .el-select {
      width: 100%;
    }
  }
</style>
